<template>
  <view :class="classArr">
    <!-- TODO 处理自定义样式 uni 打包问题 -->
    <!-- <style
      v-if="controller.model.cssStyle"
      type="text/css"
      v-html="controller.model.cssStyle"
    ></style> -->
    <!-- 内容区 -->
    <IBizRow :layout="modelData.layout">
      <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
        <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
          <!-- #ifdef H5 -->
          <slot :name="panelItem.id"></slot>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN-->
          <slot name="{{panelItem.id}}"></slot>
          <!-- #endif  -->
        </IBizCol>
      </template>
    </IBizRow>
  </view>
</template>

<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { computed } from 'vue'
import { useNamespace } from '@/use'
import { PanelContainerController } from './i-biz-panel-container.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerController,
    required: true,
  },
})

const ns = useNamespace('panel-container')

const classArr = computed(() => {
  // TODO 模型没有
  const result: Array<string | false> = [ns.b(), ns.m(props.modelData.id)]
  if (props.controller) {
    result.push(
      ...props.controller.containerClass,
      ns.is('hidden', props.controller.state && !props.controller.state.visible),
    )
  }
  return result
})
</script>
<style lang="scss">
@import './i-biz-panel-container';
</style>
